<template>
  <!-- //!#3 ref 引用和 ref 属性进行绑定 -->
  <Hello ref="helloCmpRef" />
  <button @click="handleClick">+2</button>
</template>

<script>
// 需求： ref 函数配合 ref 属性获取组件实例
import Hello from './Hello.vue'
import { ref } from 'vue'
export default {
  components: {
    Hello,
  },
  setup() {
    // !#1 创建一个 ref 引用
    const helloCmpRef = ref(null)
    const handleClick = () => {
      // helloCmpRef.value => 子组件实例
      helloCmpRef.value.changeCount(2)
    }
    // !#2 导出给模板中使用
    return {
      helloCmpRef,
      handleClick,
    }
  },
}
</script>
